<template>
    <div class="dict-tabs">
        <a-tabs v-model:activeKey="activeKey" :animated="false" class="tabs-wrap">
            <!-- 链接删除管理 -->
            <a-tab-pane key="linkDeletionManagement" tab="链接删除管理">
                <LinkDeletionManagement />
            </a-tab-pane>
            <!-- 链接插入 -->
            <a-tab-pane key="linkInsertion" tab="链接插入">
                <LinkInsertion />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, provide, type InjectionKey, type Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 链接删除管理
import LinkDeletionManagement from './LinkDeletionManagement/index.vue'
// 链接插入
import LinkInsertion from './LinkInsertion/index.vue'

// 常量数组 //
const TABS = [
    'linkDeletionManagement',
    'linkInsertion',
] as const
type TabKey = typeof TABS[number]

const isValidTab = (v: unknown): v is TabKey =>
    typeof v === 'string' && (TABS as readonly string[]).includes(v)

// 路由对象
const route = useRoute()
const router = useRouter()

// 当前激活 tab
const activeKey = ref<TabKey>('linkDeletionManagement')

const DICT_ACTIVE_TAB: InjectionKey<Ref<TabKey>> = Symbol('DICT_ACTIVE_TAB')
provide(DICT_ACTIVE_TAB, activeKey)

function syncTabToUrl(tab: TabKey, replace = true) {
    const curTab = route.query.tab as string | undefined
    if (curTab === tab) return
    const q = { ...route.query, tab }
    if (replace) router.replace({ path: route.path, query: q })
    else router.push({ path: route.path, query: q })
}

onMounted(() => {
    const t = route.query.tab as string | undefined
    if (isValidTab(t)) {
        activeKey.value = t
    } else {
        syncTabToUrl(activeKey.value, true)
    }
})

// 监听路由
watch(
    () => route.query.tab,
    (t) => {
        if (isValidTab(t) && t !== activeKey.value) {
            activeKey.value = t
        }
    }
)

// 监听本地状态
watch(
    activeKey,
    (k) => {
        if ((route.query.tab as string) !== k) {
            syncTabToUrl(k, true)
        }
    },
    { immediate: false }
)
</script>

<style lang="scss" scoped>
.dict-tabs {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    min-height: 60dvh;
    overflow: hidden;
}

.tabs-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;

    :deep(.ant-tabs) {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    :deep(.ant-tabs-nav) {
        margin: 0 0 12px 0;
        flex: 0 0 auto;
    }

    /* 可滚动的内容容器 */
    :deep(.ant-tabs-content-holder) {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        /* 屏幕缩小时出现纵向滚动条 */
    }

    :deep(.ant-tabs-content) {
        height: 100%;
    }

    :deep(.ant-tabs-tabpane) {
        height: 100%;
        display: block;
    }

    :deep(.pane-title) {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 600;
    }

    :deep(.pane-body) {
        color: #555;
        line-height: 1.7;
    }
}

/* 小屏适配：减小内边距与间距 */
@media (max-width: 768px) {
    .tabs-wrap {
        padding: 8px;
        border-radius: 6px;

        :deep(.ant-tabs-nav) {
            margin-bottom: 8px;
        }
    }
}
</style>
